<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发送请求</title>
    <script src="./node_module/axios/dist/mine-axios.js"></script>
</head>
<body>
    <script>
        //拦截器构造函数
        function InterceptorManager(){
            this.handlers = [];
        }

        InterceptorManager.prototype.use = function(onFulfilled, onRejected){
            this.handlers.push({
                onFulfilled,
                onRejected
            });
        }   

        //Axios 构造函数
        function Axios(config){
            this.defaults = config;
            this.interceptors = {
                request: new InterceptorManager(),
                response: new InterceptorManager(),
            }
        }

        //request 发送请求的方法
        Axios.prototype.request = function(config){
            //发送请求
            var dispatchRequest = function(){
                return Promise.resolve('商品数据');// new XMLHttpRequest();  xhr.open  xhr.send
            }
            //声明一个数组
            var chain = [dispatchRequest, undefined];
            //对请求拦截器进行添加
            this.interceptors.request.handlers.forEach(item => {
                chain.unshift(item.onFulfilled, item.onRejected);
            });
            //对响应拦截器进行尾部添加
            this.interceptors.response.handlers.forEach(item => {
                chain.push(item.onFulfilled, item.onRejected);
            })
            //创建一个成功的 promise 对象
            var promise = Promise.resolve(config);
            //判断
            while(chain.length > 0){
                promise = promise.then(chain.shift(), chain.shift());
            }

            // promise = promise
            //     .then(f2, f2)
            //     .then(f1, f1)
            //     .then(dispatchRequest, undefined)
            //     .then(f1, f1)
            //     .then(f2, f2)

            return promise;
        }

        //构建 Axios 对象
        let axios = new Axios({method:'GET'});

        //添加请求拦截器
        axios.interceptors.request.use(config1 => {
            console.log('请求拦截器 - 成功 - 1');
            return config1;
        }, error1 => {
            console.log('请求拦截器 - 失败 - 1');
            return Promise.reject(error1);
        });

        axios.interceptors.request.use(config2 => {
            console.log('请求拦截器 - 成功 - 2');
            return config2;
        }, error2 => {
            console.log('请求拦截器 - 失败 - 2');
            return Promise.reject(error2);
        });

        axios.interceptors.response.use(response1 => {
            console.log('响应拦截器 - 成功 - 1');
            return response1;
        }, error1 => {
            console.log('响应拦截器 - 失败 - 1');
            return Promise.reject(error1);
        });

        axios.interceptors.response.use(response2 => {
            console.log('响应拦截器 - 成功 - 2');
            return response2;
        }, error2 => {
            console.log('响应拦截器 - 失败 - 2');
            return Promise.reject(error2);
        });

        console.log(axios);
        //axios  Axios.prototype.request 通过 bind 创建而来
        axios.request({
            method:"GET",
            url: 'http://127.0.0.1/server'
        }).then(response => {
            console.log(response);
        }, error => {
            console.error(error);
        })
    </script>
</body>
</html>